<template>
  <div class="page">
    <div class="search-top" ref="search-top">
      <div class="search-header">
        <div class="back" @click="goBack()"></div>
        <div class="search-wrap" @click="search">
          <div class="search-icon"></div>
          <div class="search-text">{{keyword}}</div>
        </div>
        <div class="screen-btn" @click="showScreen">筛选</div>
      </div>
      <div class="order-main">
        <div class="order-item" :class="{active:isPriceOrder}" @click="selectPrice">
          <div class="order-text">综合</div>
          <div class="order-icon"></div>
          <ul class="order-menu" v-show="isPriceOrder">
            <li :class="{active:item.active}" v-for="(item, index) in priceOrderList" :key="index"
                @click.stop="selectPriceOrder(item)">{{item.title}}
            </li>
          </ul>
        </div>
        <div class="order-item" :class="{active:isSalesOrder}" @click="selectSales">
          <div class="order-text">销量</div>
        </div>
      </div>
    </div>
    <div class="goods-main" ref="goodsMain">
      <div>
        <div class="goods-list" ref="goods-list" v-for="(item,index) in goodsList" :key="index" @click="$router.push({name: 'goods-detail', query: {gid: item.gid}})">
          <div class="image"><img v-lazy="item.image"/></div>
          <div class="goods-content">
            <div class="goods-title">{{item.title}}</div>
            <div class="price">¥{{item.price}}</div>
            <div class="sales">销量<span>{{item.sales}}</span>件</div>
          </div>
        </div>
        <div class="no-data" v-show="goodsList.length <= 0">没有相关商品！</div>
      </div>
    </div>
    <div ref="mask" class="mask" v-show="isScreen" @click="closeScreen"></div>
    <div ref="screen" class="screen" :class="isScreen ? 'move' : 'unmove'">
      <div>
        <div class="attr-wrap">
          <div class="attr-title-wrap" @click="isClassify=!isClassify">
            <div class="attr-name">分类</div>
            <div class="attr-icon" :class="{up:isClassify}"></div>
          </div>
          <div class="item-wrap" v-show="isClassify">
            <div class="item" :class="{active:item.active}" v-for="(item,index) in classifys" :key="index"
                 @click="selectClassify(index)">{{item.title}}
            </div>
          </div>
        </div>
        <div style="width:100%;height:1px;backgroundColor:#EFEFEF"></div>
        <div class="attr-wrap">
          <div class="attr-title-wrap" @click="priceData.isHide = !priceData.isHide">
            <div class="attr-name">价格区间</div>
            <div class="price-wrap" @click.stop="priceData.isHide = true">
              <div class="price-input">
                <input type="tel" placeholder="最低价" value="20" v-model="minPrice" @input="setMinPrice"/>
              </div>
              <div class="price-line"></div>
              <div class="price-input">
                <input type="tel" placeholder="最高价" value="200" v-model="maxPrice" @input="setMaxPrice"/>
              </div>
            </div>
            <div class="attr-icon" :class="{up:priceData.isHide}"></div>
          </div>
          <div class="item-wrap" v-show="priceData.isHide">
            <div class="item" :class="{active:item.active}" v-for="(item,index) in priceData.items" :key="index"
                 @click="selectPriceAttr(index)">
              {{item.price1}} - {{item.price2}}
            </div>
          </div>
        </div>
        <div style="width:100%;height:0.3rem;backgroundColor:#EFEFEF"></div>

        <div class="attr-wrap" v-for="(item,index) in attrs" :key="index">
          <div class="attr-title-wrap" @click="toggleAttrs(index)">
            <div class="attr-name">{{item.title}}</div>
            <div class="attr-icon" :class="{up:!item.isHide}"></div>
          </div>
          <div class="item-wrap" v-show="!item.isHide">
            <div class="item" :class="{active:item2.active}" :key="index2" v-for="(item2,index2) in item.param"
                 @click="selectAttrs(index,index2)">
              {{item2.title}}
            </div>
          </div>
        </div>
        <div style="width:100%;height:1px;backgroundColor:#EFEFEF"></div>
        <div style="width:100%;height:1.2rem"></div>
      </div>
      <div class="handel-wrap">
        <div class="item">共<span>{{totalGoods}}</span>件</div>
        <div class="item reset" @click="resetFilters">全部重置</div>
        <div class="item sure" @click="goFilters">确定</div>
      </div>
    </div>

    <my-search :show="showSearch" :isLocal="true"></my-search>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import { classifyData } from 'api/goods'
import { getSearchData, getParamsData } from 'api/search'
import MySearch from 'components/MySearch'

export default {
  name: 'goods-search',
  data () {
    return {
      goodsList: [],
      totalGoods: [],
      showSearch: { show: false },
      keyword: '',
      isPriceOrder: false,
      isSalesOrder: false,
      isScreen: false,
      isClassify: true,
      classifys: [],
      priceData: {
        isHide: true,
        items: [
          { price1: 1, price2: 50, active: false },
          { price1: 51, price2: 99, active: false },
          { price1: 100, price2: 300, active: false },
          { price1: 301, price2: 1000, active: false },
          { price1: 1001, price2: 4000, active: false },
          { price1: 4001, price2: 9999, active: false }
        ]
      },
      priceOrderList: [
        { otype: 'all', title: '综合', 'active': true },
        { otype: 'up', title: '价格从低到高', 'active': false },
        { otype: 'down', title: '价格从高到低', 'active': false }
      ],
      params: {},
      minPrice: '',
      maxPrice: '',
      attrs: [],
    }
  },
  methods: {
    resetFilters () {
      this.keyword = this.$route.query.keyword
      this.otype = 'all'
      this.isSalesOrder = false
      this.isPriceOrder = false
      this.priceOrderList[0].active = true
      this.filters = []
      this.cid = []
      this.minPrice = ''
      this.maxPrice = ''
      this.priceData.items.forEach((item, index) => {
        this.priceData.items[index].active = false
      })
      this.attrs.forEach(item => {
        item.param.forEach(item2 => {
          item2.active = false
        })
      })
      this.classifys.forEach(item => {
        item.active = false
      })
      this.init()
      this.closeScreen()
    },
    goFilters () {
      this.closeScreen()
      this.init()
    },
    initGoodsScroll () {
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      this.$refs.goodsMain.style.height = windowHeight - this.$refs.goodsMain.offsetTop + 'px'
      this.goodsScroll = new BScroll(this.$refs.goodsMain, {
        click: true,
        scrollY: true,
        pullUpLoad: true,
      })
      this.goodsScroll.on('pullingUp', () => {
        this.params.page++
        getSearchData(this.params).then(res => {
          if (res.code === 200) {
            res.data.forEach((item) => {
              this.goodsList.push(item)
            })
            this.goodsScroll.finishPullUp()
            this.$nextTick(() => {
              this.goodsScroll.refresh()
            })
          } else if (res.code === 201) {
            this.$toast.success('没有更多了')
          }
        })
      })
    },
    init () {
      this.params.kwords = this.keyword
      this.params.page = 1
      this.params.otype = this.otype || 'all'
      this.params.cid = this.cid || ''
      this.params.param = JSON.stringify(this.filters) || ''
      this.params.price1 = this.minPrice
      this.params.price2 = this.maxPrice

      getSearchData(this.params).then(res => {
        if (res.code === 200) {
          this.goodsList = res.data
          this.totalGoods = res.pageinfo.total
        } else {
          this.goodsList = []
          this.totalGoods = 0
        }
        this.$nextTick(() => {
          if (this.goodsScroll) {
            this.goodsScroll.refresh()
            this.goodsScroll.finishPullUp()
          } else {
            this.initGoodsScroll()
          }
          this.goodsScroll.scrollTo(0, 0)
        })
      })
    },
    getAttrs () {
      getParamsData(this.keyword).then(res => {
        if (res.code === 200) {
          res.data.forEach((item, index) => {
            res.data[index].isHide = false
            res.data[index].param.forEach((item2, index2) => {
              res.data[index].param[index2].active = false
            })
          })
          this.attrs = res.data
        } else {
          this.attrs = []
        }
      })
    },
    selectAttrs (index, index2) {
      this.attrs[index].param[index2].active = !this.attrs[index].param[index2].active
      this.filters = []
      this.attrs.forEach((item) => {
        item.param.forEach((s) => {
          if (s.active) {
            this.filters.push(s.pid)
          }
        })
      })
    },
    toggleAttrs (index) {
      this.attrs[index].isHide = !this.attrs[index].isHide
      this.$set(this.attrs, index, this.attrs[index])
    },
    selectPrice () {
      this.isPriceOrder = !this.isPriceOrder
      this.isSalesOrder = false
    },
    selectPriceOrder (selected) {
      this.priceOrderList.forEach((item, index) => {
        if (item.otype === selected.otype) {
          this.priceOrderList[index].active = true
          this.$set(this.priceOrderList, index, this.priceOrderList[index])
          this.otype = this.priceOrderList[index].otype
          this.init()
        } else {
          this.priceOrderList[index].active = false
          this.$set(this.priceOrderList, index, this.priceOrderList[index])
        }
      })
      this.isPriceOrder = false
    },
    selectSales () {
      this.isSalesOrder = !this.isSalesOrder
      this.isPriceOrder = false
      this.otype = 'sales'
      this.init()
    },
    showScreen () {
      this.isScreen = true
    },
    closeScreen () {
      this.isScreen = false
    },
    getClassifys () {
      classifyData().then(res => {
        if (res.code === 200) {
          res.data.forEach((item, index) => {
            res.data[index].active = false
          })
          this.classifys = res.data
          this.$nextTick(() => {
            this.refreshScroll()
          })
        }
      })
    },
    selectClassify (selected) {
      this.classifys.forEach((item, index) => {
        if (selected !== index && this.classifys[index].active === true) {
          this.classifys[index].active = false
        }
      })
      this.classifys[selected].active = !this.classifys[selected].active
      this.$set(this.classifys, selected, this.classifys[selected])
      let cid = this.classifys[selected].active ? this.classifys[selected].cid : ''
      this.cid = cid
    },
    selectPriceAttr (selected) {
      this.priceData.items.forEach((item, index) => {
        if (selected !== index) {
          this.priceData.items[index].active = false
        }
      })
      this.priceData.items[selected].active = !this.priceData.items[selected].active
      this.$set(this.priceData.items, selected, this.priceData.items[selected])
      this.minPrice = this.priceData.items[selected].price1
      this.maxPrice = this.priceData.items[selected].price2

    },
    priceInput (price) {
      price = price.replace(/[^\d.]/g, '') //清除"数字"和"."以外的字符
      price = price.replace(/^\./g, '') //验证第一个字符是数字
      price = price.replace(/\.{2,}/g, '.') //只保留第一个, 清除多余的
      price = price.replace(/^(\d+)\.(\d\d).*$/, '$1.$2') //只能输入两个小数
      return price
    },
    setMinPrice () {
      this.minPrice = this.priceInput(this.minPrice)
    },
    setMaxPrice () {
      this.maxPrice = this.priceInput(this.maxPrice)
    },
    search () {
      this.showSearch.show = true
      document.documentElement.style.height = '100%'
      document.body.style.height = '100%'
      document.body.style.overflow = 'hidden'
    },
    initScroll () {
      this.scroller = new BScroll(this.$refs.screen, {
        click: true,
      })
    },
    refreshScroll () {
      this.scroller && this.scroller.refresh()
    },
    destoryScroll () {
      this.scroller && this.scroller.destroy()
    },
    goBack () {
      this.$router.go(-1)
    },
  },
  beforeRouteUpdate (to, form, next) {
    this.keyword = to.query.keyword
    this.otype = 'all'
    this.isSalesOrder = false
    this.isPriceOrder = false
    this.priceOrderList[0].active = true
    this.filters = []
    this.cid = []
    this.minPrice = ''
    this.maxPrice = ''
    this.priceData.items.forEach((item, index) => {
      this.priceData.items[index].active = false
    })
    this.getAttrs()
    this.getClassifys()
    this.init()
    next()
  },
  created () {
    document.title = this.$route.meta.title
    this.keyword = this.$route.query.keyword
    this.getAttrs()
    this.init()
    this.getClassifys()
  },
  mounted () {
    this.initScroll()
    // this.initGoodsScroll()
  },
  destroyed () {
    this.destoryScroll()
    this.goodsScroll && this.goodsScroll.destroy()
  },
  components: {
    MySearch
  }
}
</script>
<style scoped>
  .page {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    overflow: hidden;
  }

  .search-top {
    width: 100%;
    position: fixed;
    z-index: 10;
    left: 0px;
    top: 0px;
    background-color: #FFFFFF;
  }

  .search-header {
    width: 100%;
    height: 0.8rem;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center
  }

  .search-header .back {
    width: 0.8rem;
    height: 0.8rem;
    background-image: url("../../../assets/images/home/goods/back.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .search-header .search-wrap {
    width: 75%;
    background: #EAEAEA;
    height: 80%;
    border-radius: 0.1rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  .search-header .search-wrap .search-icon {
    width: 0.5rem;
    height: 0.5rem;
    background-image: url("../../../assets/images/common/search.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin-left: 0.1rem;
    margin-right: 0.2rem;
  }

  .search-header .search-wrap .search-text {
    width: 90%;
    height: auto;
    font-size: 0.32rem;
  }

  .search-header .screen-btn {
    width: auto;
    height: auto;
    font-size: 0.32rem;
    margin-right: 0.1rem;
  }

  .search-top .order-main {
    width: 100%;
    height: 0.8rem;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  .search-top .order-main .order-item {
    width: auto;
    height: auto;
    display: flex;
    display: -webkit-flex;
    margin-left: 0.4rem;
    position: relative;
    z-index: 1;
  }

  .search-top .order-main .order-item .order-text {
    font-size: 0.32rem;
  }

  .search-top .order-main .order-item.active .order-text {
    color: #FDA208
  }

  .search-top .order-main .order-item .order-icon {
    width: 0.35rem;
    height: 0.35rem;
    background-image: url("../../../assets/images/home/goods/down.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 0.1rem;
  }

  .search-top .order-main .order-item.active .order-icon {
    background-image: url("../../../assets/images/home/goods/up.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /*.search-top .order-main .order-item .order-icon.up{background-image:url("../../../../assets/images/home/goods/up.png");background-size:100%;background-position: center;background-repeat: no-repeat;}*/
  .search-top .order-main .order-item .order-menu {
    width: 688%;
    height: auto;
    background-color: #FFFFFF;
    position: absolute;
    z-index: 1;
    left: -35%;
    top: 0.63rem;
  }

  .search-top .order-main .order-item .order-menu li {
    width: 95%;
    height: 0.8rem;
    border-bottom: 1px solid #EFEFEF;
    font-size: 0.28rem;
    line-height: 0.8rem;
    padding-left: 0.4rem;
  }

  .search-top .order-main .order-item .order-menu li.active {
    color: #FDA208
  }

  .goods-main {
    width: 100%;
    overflow: hidden;
    margin-top: 2rem;
  }

  .goods-main .goods-list {
    width: 100%;
    height: 2rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    overflow: hidden;
    margin-bottom: 0.4rem;
  }

  .goods-main .goods-list .image {
    width: 2rem;
    height: 2rem;
    margin-left: 0.1rem;
    overflow: hidden;
    text-align: center;
  }

  .goods-main .goods-list .image img {
    width: auto;
    height: auto;
    max-height: 100%;
    max-height: 100%;
  }

  .goods-main .goods-list .goods-content {
    width: 67%;
    height: 98%;
    border-bottom: solid 1px #cccccc;
  }

  .goods-main .goods-list .goods-title {
    width: 95%;
    font-size: 0.28rem;
    overflow: hidden;
  }

  .goods-main .goods-list .price {
    font-size: 0.32rem;
    color: #F93036;
    margin-top: 0.1rem;
  }

  .goods-main .goods-list .sales {
    font-size: 0.24rem;
    color: #969696;
    margin-top: 0.1rem;
  }

  .goods-main .goods-list .sales span {
    color: #FDA208
  }

  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.3)
  }

  .screen {
    width: 80%;
    height: 100%;
    position: fixed;
    z-index: 100;
    right: 0px;
    top: 0px;
    background-color: #FFFFFF;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    overflow: hidden;
  }

  .screen.move {
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transform: translateX(0%);
    -webkit-transform: translateX(0%)
  }

  .screen.unmove {
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transform: translateX(100%);
    -webkit-transform: translateX(100%)
  }

  .screen .attr-wrap {
    width: 100%;
  }

  .screen .attr-wrap .attr-title-wrap {
    width: 94%;
    height: 0.8rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .screen .attr-wrap .attr-title-wrap .attr-name {
    font-size: 0.32rem;
  }

  .screen .attr-wrap .attr-title-wrap .attr-icon {
    width: 0.4rem;
    height: 0.4rem;
    background-image: url("../../../assets/images/home/goods/down.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .screen .attr-wrap .attr-title-wrap .attr-icon.up {
    background-image: url("../../../assets/images/home/goods/up.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .screen .attr-wrap .attr-title-wrap .price-wrap {
    width: auto;
    height: auto;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    margin-left: 18%;
  }

  .screen .attr-wrap .attr-title-wrap .price-wrap .price-input {
    width: 1rem;
    height: 0.4rem;
    border: 1px solid #EFEFEF
  }

  .screen .attr-wrap .attr-title-wrap .price-wrap .price-input input {
    width: 100%;
    height: 89%;
    font-size: 0.28rem;
  }

  .screen .attr-wrap .attr-title-wrap .price-wrap .price-line {
    width: 0.4rem;
    height: 1px;
    background-color: #EFEFEF;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
  }

  .screen .attr-wrap .item-wrap {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }

  .screen .attr-wrap .item-wrap .item {
    width: 30%;
    height: 0.64rem;
    background-color: #EFEFEF;
    text-align: center;
    line-height: 0.64rem;
    overflow: hidden;
    font-size: 0.28rem;
    border-radius: 0.1rem;
    margin-left: 2%;
    margin-right: 1%;
    margin-bottom: 0.2rem;
  }

  .screen .attr-wrap .item-wrap .item.active {
    color: #FFFFFF;
    background-color: #FDA208;
  }

  .screen .handel-wrap {
    width: 100%;
    height: 1rem;
    background-color: #FFFFFF;
    border-top: 1px solid #EFEFEF;
    position: absolute;
    z-index: 1;
    left: 0px;
    bottom: 0px;
    display: flex;
    display: -webkit-flex;
  }

  .screen .handel-wrap .item {
    width: auto;
    height: 100%;
    font-size: 0.28rem;
    text-align: center;
    line-height: 1rem;
    flex: 1;
    -webkit-flex: 1
  }

  .screen .handel-wrap .item span {
    color: #FDA208
  }

  .screen .handel-wrap .item.reset {
    background-color: #EFEFEF
  }

  .screen .handel-wrap .item.sure {
    background-color: #FDA208;
    color: #FFFFFF
  }
</style>
